<template>
	<view class="diy-banner-box pr" :class="itemData.style.imgShape"
		:style="'background-color:'+itemData.style.background+';'">
		<swiper class="swiper" :current="current" :autoplay="false" :duration="500" :interval="interval"
			@change="changeSwiper"
			:style="itemData.style.imgShape=='square'?'height:'+itemData.style.height+'rpx;':'height:'+(itemData.style.height*0.92)+'rpx;'">
			<swiper-item v-for="(item,index) in itemData.data" :key="index" @click="gotoPages(item)">
				<image
					:style="itemData.style.imgShape=='square'?'height:'+itemData.style.height+'rpx;':'height:'+(itemData.style.height*0.92)+'rpx;'"
					:src="item.imgUrl"></image>
			</swiper-item>
		</swiper>
		<view class="swiper-dots ww100 d-c-c" :class="itemData.style.btnShape">
			<view :class="current==index?'swiper-dot active':'swiper-dot'" v-for="(item,index) in itemData.data"
				:style="current==index?'background-color:'+indicatorActiveColor+';':''" :key="index">
			</view>
		</view>
		<!--图片弹窗-->
		<Popup :show="isPopup" msg=" " @hidePopup="hidePopupFunc">
			<view class="buy-checkout ww100">
				<image mode="widthFix" :src="popupImgUrl" style="height: auto;" show-menu-by-longpress="true"></image>
			</view>
		</Popup>
	</view>

</template>

<script>
	import Popup from '@/components/uni-popup.vue';
	export default {
		data() {
			return {
				direction: 1,
				timer: null,
				isPopup: false,
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				indicatorActiveColor: '#ffffff',
				current: 0,
				agent: {},
				detail: {},
				popupImgUrl: '',
			}
		},
		components: {
			Popup
		},
		props: ['itemData'],
		created() {
			//this.interval = this.itemData.params.interval;
			this.indicatorActiveColor = this.itemData.style.btnColor;
			let token = uni.getStorageSync('token')
			if (token) {
				this.getUserInfo();
			}
		},
		mounted() {
			this.startAutoLoop();
		},
		beforeDestroy() {
			this.stopAutoLoop();
		},
		methods: {
			startAutoLoop() {
				this.stopAutoLoop();
				this.timer = setInterval(() => {
					const maxIndex = this.itemData.data.length - 1;
					if (this.direction === 1) {
						if (this.current < maxIndex) {
							this.current++;
						} else {
							this.direction = -1;
							this.current--;
						}
					} else {
						if (this.current > 0) {
							this.current--;
						} else {
							this.direction = 1;
							this.current++;
						}
					}
				}, this.interval);
			},
			stopAutoLoop() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			changeSwiper(e) {
				this.current = e.detail.current;
			},
			/*关闭弹窗*/
			hidePopupFunc(e) {
				this.isPopup = false;
			},
			/*获取数据*/
			getUserInfo() {
				let self = this;
				self.isloadding = true;
				self._get('user.index/detail', {}, function(res) {
					self.agent = res.data.agent;
					self.detail = res.data.userInfo;
					self.isloadding = false;
				});
			},
			/*
			changeSwiper(e) {
				this.current = e.detail.current;
			},
			*/
			parseQueryString(queryString) {
				const params = {};
				const pairs = queryString.split('&');
				pairs.forEach(pair => {
					const [key, value] = pair.split('=');
					if (key) {
						params[key] = decodeURIComponent(value || '');
					}
				});
				return params;
			},
			/*跳转页面*/
			gotoPages(e) {
				console.info('连接地址', e)
				let userGradeId = this.detail.grade_id;
				console.info('用户等级ID', userGradeId)
				if (userGradeId && userGradeId > 1 && (e.linkUrl == 'pages/index/agentupgrade' || e.name ==
						'pages/index/agentupgrade')) {
					this.showSuccess('您已经是会员了！');
					return false;
				}
				if (userGradeId && userGradeId == 1 && (e.linkUrl == 'pages/index/agentproduct?category_id=63' || e.name ==
						'pages/index/agentproduct?category_id=63')) {
					this.showSuccess('您还不是会员！');
					return false;
				}
				/*
				if(userGradeId && userGradeId>2 && (e.linkUrl == 'pages/index/agentproduct?category_id=63' || e.name=='pages/index/agentproduct?category_id=63')){
					this.showSuccess('您已经是经销商了！');
					return false;
				}
				*/
				// 1. 匹配 `zs-link?` 开头的部分
				let match = e.name.match(/zs-link\?([^\s]+)/);
				console.info(match)
				if (e.linkUrl) {
					this.gotoPage(e.linkUrl);
				} else if (match) {
					let queryString = match[1];
					// 2. 使用 URLSearchParams 解析参数
					let params = this.parseQueryString(queryString);
					console.info('获取的参数', params)
					let type = params.type;
					console.info('type', type)
					//1为图片弹窗
					if (type == '1') {
						let url = params.url;
						console.log('url:', url);
						this.isPopup = true;
						this.popupImgUrl = url;
					}
				} else {
					this.gotoPage(e.name);
				}
			}
		}
	}
</script>

<style>
	.diy-banner-box {
		overflow: hidden;
	}

	.diy-banner-box,
	.diy-banner-box .swiper {
		/* width: 750rpx;
		background-color: #FFFFFF; */
		width: 100%;
	}

	.diy-banner-box.round,
	.diy-banner-box.round .swiper {
		width: 100%;
		/*width: 750rpx;
		 background-color: #FFFFFF; */
	}

	.diy-banner-box image {
		width: 100%;
		/*
		width: 750rpx;
		*/
	}

	.diy-banner-box.round {
		/*padding: 30rpx;*/
		box-sizing: border-box;
	}

	.diy-banner-box.round image {
		width: 100%;
		/*
		width: 690rpx;
		border-radius: 12rpx;
		*/
	}

	.diy-banner-box.round .swiper-dots {
		position: absolute;
		bottom: 40rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.diy-banner-box.square .swiper-dots {
		position: absolute;
		bottom: 20rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.swiper-dots.square .swiper-dot {
		width: 14rpx;
		height: 14rpx;
		margin: 0 4rpx;
		background: #ebedf0;
		opacity: 0.3;
	}

	.swiper-dots.round .swiper-dot {
		width: 22rpx;
		height: 22rpx;
		margin: 0 4rpx;
		background: #ebedf0;
		opacity: 0.3;
		border-radius: 50%;
	}

	.swiper-dots.rectangle .swiper-dot {
		width: 40rpx;
		height: 6rpx;
		margin: 0 4rpx;
		background: #ebedf0;
		opacity: 0.3;
		border-radius: 4rpx;
	}

	.swiper-dots.round .swiper-dot.active,
	.swiper-dots.square .swiper-dot.active,
	.swiper-dots.rectangle .swiper-dot.active {
		opacity: 1;
	}
</style>
